<template>
    <div class="example-container">
        <h2>多图片上传组件示例</h2>

        <!-- 基础用法 -->
        <div class="example-section">
            <h3>基础用法</h3>
            <MultiImageUpload v-model="images" :max-count="5" :upload-text="'点击上传图片'" @upload-success="onUploadSuccess"
                @remove="onRemove" @change="onChange" />
            <div class="result">
                <p>当前图片数量: {{ images.length }}</p>
                <p>图片URLs: {{ images.join(', ') }}</p>
            </div>
        </div>

        <!-- 自定义配置 -->
        <div class="example-section">
            <h3>自定义配置</h3>
            <MultiImageUpload v-model="customImages" :max-count="3" :multiple="false" :upload-text="'单张上传'"
                :accept="'image/jpeg,image/png'" @upload-success="onCustomUploadSuccess" />
        </div>

        <!-- 禁用状态 -->
        <div class="example-section">
            <h3>禁用状态</h3>
            <MultiImageUpload v-model="disabledImages" :disabled="true" :upload-text="'已禁用'" />
        </div>

        <!-- 操作按钮 -->
        <div class="example-section">
            <h3>组件方法调用</h3>
            <el-button @click="clearImages">清空图片</el-button>
            <el-button @click="getImages">获取图片列表</el-button>
            <el-button @click="triggerUpload">手动触发上传</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import MultiImageUpload from './MultiImageUpload.vue';

// 响应式数据
const images = ref<string[]>([]);
const customImages = ref<string[]>([]);
const disabledImages = ref<string[]>(['https://example.com/image1.jpg']);

// 事件处理函数
const onUploadSuccess = (image: any) => {
    ElMessage.success(`图片上传成功: ${image.name}`);
};

const onRemove = (index: number, image: any) => {
    ElMessage.info(`删除了图片: ${image.name}`);
};

const onChange = (urls: string[]) => {
    console.log('图片列表变化:', urls);
};

const onCustomUploadSuccess = (image: any) => {
    ElMessage.success(`自定义上传成功: ${image.name}`);
};

// 组件方法调用
const multiUploadRef = ref();

const clearImages = () => {
    images.value = [];
    ElMessage.success('图片已清空');
};

const getImages = () => {
    console.log('当前图片列表:', images.value);
    ElMessage.info(`当前有 ${images.value.length} 张图片`);
};

const triggerUpload = () => {
    // 这里可以通过 ref 调用组件方法
    ElMessage.info('手动触发上传功能');
};
</script>

<style scoped>
.example-container {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

.example-section {
    margin-bottom: 40px;
    padding: 20px;
    border: 1px solid #e4e7ed;
    border-radius: 8px;
    background: #fff;
}

.example-section h3 {
    margin-top: 0;
    margin-bottom: 16px;
    color: #303133;
}

.result {
    margin-top: 16px;
    padding: 12px;
    background: #f5f7fa;
    border-radius: 4px;
    font-size: 14px;
}

.result p {
    margin: 4px 0;
    color: #606266;
}

.el-button {
    margin-right: 12px;
    margin-bottom: 8px;
}
</style>